<template>
    <div id="app">
        <router-view />
        <div class="tabbar">
            <ul>
                <router-link to="/home" tag="li" active-class="active">
                    <span class="iconfont icon-tubiao-"></span>
                    <span>作品</span>
                </router-link>
                <router-link to="/stylist" tag="li" active-class="active">
                    <span class="iconfont icon-jiandao"></span>
                    <span>设计师</span>
                </router-link>
                <router-link to="/shoppingCart" tag="li" active-class="active">
                    <span class="iconfont icon-gouwuche1"></span>
                    <span>购物车</span>
                </router-link>
                <router-link to="/my" tag="li" active-class="active">
                    <span class="iconfont icon-huangguan"></span>
                    <span>我的</span>
                </router-link>
            </ul>
        </div>
    </div>

</template>

<script>

    export default {
        name: 'App',
        data() {
            return {
                selected: '作品'
            }
        },

        methods: {
           getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
               return null;
           }
        },
        created () {
           const appId = 'wx81243217748ce054';
           const oauth_url = this.getUrl('login/code');
           const url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
           const code = this.getUrlParam("code");
              if(localStorage.getItem('loginMessage')){
                  console.log('已登录');
              }else {
                  console.log('未登录');
                  if(!code){
                      window.location = url ;
                  }else {

                      this.$http.get(oauth_url, {params: {code: code}}).then(function (res) {
                          // success callback
                          localStorage.setItem('loginMessage',JSON.stringify(res.data.data))
                          console.log(200);
                      },function (err) {
                          // error callback
                          console.log(err);
                      });

                  }

              }



    }}
</script>
<style lang="less" rel="stylesheet/less">
    @import "../lib/less/normalize";
    @import "../lib/less/variable";

    body, html {
        color: #666;
        background: #f4f4f4;
        .fs(14);
    }

    /*公共样式*/
    /*渐变色效果*/
    .gradient {
        background: rgb(34, 35, 159);
        background: -moz-linear-gradient(top, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 8%, rgb(22, 87, 188) 43%, rgb(15, 122, 218) 59%, rgb(15, 122, 218) 59%, rgb(22, 87, 188) 72%, rgb(34, 35, 159) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(34, 35, 159)), color-stop(0%, rgb(34, 35, 159)), color-stop(8%, rgb(34, 35, 159)), color-stop(43%, rgb(22, 87, 188)), color-stop(59%, rgb(15, 122, 218)), color-stop(59%, rgb(15, 122, 218)), color-stop(72%, rgb(22, 87, 188)), color-stop(100%, rgb(34, 35, 159)));
        background: -webkit-linear-gradient(top, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 8%, rgb(22, 87, 188) 43%, rgb(15, 122, 218) 59%, rgb(15, 122, 218) 59%, rgb(22, 87, 188) 72%, rgb(34, 35, 159) 100%);
        background: -o-linear-gradient(top, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 8%, rgb(22, 87, 188) 43%, rgb(15, 122, 218) 59%, rgb(15, 122, 218) 59%, rgb(22, 87, 188) 72%, rgb(34, 35, 159) 100%);
        background: -ms-linear-gradient(top, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 8%, rgb(22, 87, 188) 43%, rgb(15, 122, 218) 59%, rgb(15, 122, 218) 59%, rgb(22, 87, 188) 72%, rgb(34, 35, 159) 100%);
        background: linear-gradient(to bottom, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 0%, rgb(34, 35, 159) 8%, rgb(22, 87, 188) 43%, rgb(15, 122, 218) 59%, rgb(15, 122, 218) 59%, rgb(22, 87, 188) 72%, rgb(34, 35, 159) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22239f', endColorstr='#22239f', GradientType=0);
        color: #fff;
    }

    .backgrounds {
        color: #fff;
        button {
            color: #fff;
        }
        background: -moz-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(25, 95, 195, 1)), color-stop(14%, rgba(21, 87, 188, 1)), color-stop(42%, rgba(14, 120, 206, 1)), color-stop(43%, rgba(14, 120, 206, 1)), color-stop(52%, rgba(14, 120, 206, 1)), color-stop(74%, rgba(21, 87, 188, 1)), color-stop(80%, rgba(21, 87, 188, 1)), color-stop(100%, rgba(35, 31, 157, 1)));
        background: -webkit-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: -o-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: -ms-linear-gradient(left, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        background: linear-gradient(to right, rgba(25, 95, 195, 1) 0%, rgba(21, 87, 188, 1) 14%, rgba(14, 120, 206, 1) 42%, rgba(14, 120, 206, 1) 43%, rgba(14, 120, 206, 1) 52%, rgba(21, 87, 188, 1) 74%, rgba(21, 87, 188, 1) 80%, rgba(35, 31, 157, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#195fc3', endColorstr='#231f9d', GradientType=1);
    }


    /*footer暂无更多样式*/
    .footer {
        .pb(60);
        .pt(20);
        background: #fff;
        text-align: center;
        .fs(16);
        color: #ccc;
    }

    a:link {
        text-decoration: none;
    }

    /* 指正常的未被访问过的链接*/
    a:visited {
        text-decoration: none;
    }

    /*指已经访问过的链接*/
    a:hover {
        text-decoration: none;
    }

    /*指鼠标在链接*/
    a:active {
        text-decoration: none;
    }

    /* 指正在点的链接*/
    .tabbar {
        width: 100%;
        .h(50);
        .fs(14);
        box-sizing: border-box;
        text-align: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #ccc;
        background: #fff;
        ul {
            display: flex;
            li {
                flex: 1;
                span {
                    .lh(25);
                    display: block;
                    width: 100%;
                }
                span:first-child {
                    position: relative;
                    .top(6);
                    .fs(25);
                }
                span:last-child {
                    vertical-align: bottom;
                }

            }
            .active {
                color: #0F7ADA;
                span:first-child {
                    font-weight: bold;
                }
            ;
            }

        }
    }
</style>
